<template>
	<div style="margin-top: 60px;display: none;">
		<nav class="navbar navbar-default navbar-inverse navbar-fixed-bottom audio-bar">
			<div class="container-fluid">
				<audio style="display: none;" loop="loop"></audio>
				<ul class="">
					<li>
						<span class="glyphicon glyphicon-step-backward"></span>
						<span class="glyphicon glyphicon-play"></span>
						<span class="glyphicon glyphicon-step-forward"></span>
					</li>
					<li>
						<span class="glyphicon glyphicon-volume-up"></span>
					</li>
					<li>
						<span :class="modeIcon"></span>
					</li>
				</ul>
			</div>
		</nav>
	</div>
</template>

<script>
	export default {
		data: function() {
			var width = document.body.clientWidth
			var style = 'width: ' + width + 'px;'
			console.log(style)
			return {
				playlist: [],
				currentSongs: {},
				isShow: false,
				style: style,
				mode: 'retweet'
			}
		},
		created: function() {
			var that = this
			this.$Hub.$on('load', (url) => {
				that.load(url)
				that.play()
			})
			this.$Hub.$on('play', () => {
				that.play()
			})
			this.$Hub.$on('pause', () => {
				that.pause()
			})
		},
		computed: {
			modeIcon: function() {
				switch(this.mode) {
					case 'retweet':
						return 'glyphicon glyphicon-repeat'
					case 'random':
						return 'glyphicon glyphicon-random'
					case 'single':
						return 'glyphicon glyphicon-repeat glyphicon-custom-single'
					default:
						return 'glyphicon glyphicon-repeat'
				}
			}
		},
		methods: {
			load: function(url, id, name, artists) {
				var audio = this.$el.querySelector('audio')
				audio.src = url
			},
			pause: function() {
				var audio = this.$el.querySelector('audio')
				audio.pause()
			},
			play: function() {
				var audio = this.$el.querySelector('audio')
				audio.play()
			},
			add: function(url, id, name, artists) {
				this.playlist.push({
					id: id,
					url: url,
					name: name,
					artists: artists
				})
			}
		}
	}
</script>

<style>
	.audio-bar {
		/*position: fixed;
		z-index: 999;*/
		height: 30px;
		/*background-color: #2C3E50;*/
		border-radius: 3px;
		box-shadow: 1px 1px 1px 1px #333;
	}
</style>